<template>
  <div class="jumin-main">
    <div class="jumin-zong">
      <div class="zong-name">会员总数：</div>
      <div class="zong-renshu">
        <span class="zongrenshu">{{ formatNum(totalNum) }}</span>
        <span class="renzi">人</span>
      </div>
    </div>
    <div class="jumin-items">
      <div class="juminitem" v-for="(item,index) in juminData" :key="index">
        <div class="item-name">{{ formatNum(item.name) }}</div>
        <div class="item-renshu">
          <span class="itemrenshu">{{ formatNum(parseInt(item.value)) }}</span>
          <span class="renzi">人</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { request } from '@/api/request.js'
export default {
  name: 'ViewJumin',
  data () {
    return {
      juminData: []
    }
  },
  computed: {
    totalNum(){
      let totalNum = 0;
      this.juminData.forEach(item => {
        totalNum += parseInt(item.value);
      });
      return totalNum;
    }
  },
  mounted() {
    this.getJumin();
  },
  methods: {
    getJumin(){
      request({
        url: '/jumin',
        method: 'get'
      }).then(res=>{
        this.juminData = res.data;
      })
    },
    formatNum(num){
      return num.toLocaleString();
    }
  }
}
</script>

<style lang="less" scoped>
.jumin-main{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  user-select: none;
  .jumin-zong{
    width: 100%;
    height: 40%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 2rem;
    color: @mkColor;
    .zong-name{
      font-family: siyuanFont;
      font-size: 1.2rem;
    }
    .zong-renshu{
      font-family: siyuanFont;
      font-size: 1.2rem;
      .zongrenshu{
        font-family: shuziFont;
        font-size: 3.3rem;
        color: @titleColor;
      }
      .renzi{
        margin-left: 0.8rem;
      }
    }
  }
  .jumin-items{
    width: 100%;
    height: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    .juminitem{
      flex: 1;
      position: relative;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      color: @mkColor;
      .item-name{
        font-family: siyuanFont;
        font-size: 1.1rem;
      }
      .item-renshu{
        font-family: siyuanFont;
        font-size: 1.1rem;
        .itemrenshu{
          font-family: shuziFont;
          font-size: 2.1rem;
        }
        .renzi{
          margin-left: 0.6rem;
          color: @titleColor;
        }
      }
    }
    .juminitem::after{
      content: '';
      position: absolute;
      right: 0;
      bottom: 20%;
      width: 2px;
      height: 60%;
      border-right: 1px solid @shuxianColor;
    }
    .juminitem:last-child::after{
      border-right: none;
    }
  }
}
</style>